<template>
  <div>
    <el-row :gutter="14">
      <DataCard :card-list="tocardList" />
      <TableCard :url="goodsStockRankingUrl" :size="size" :stripe="true" :table-card-name="titleList.inventoryName" />
      <TableCard :url="reportLossRankingUrl" :size="size" :stripe="true" :table-card-name="titleList.breakageName" :close-thirty="closeThirty" />
      <ChartCard v-if="warehouseBtn === 'amount'" :chart-data="storageTimePieData" :opt="{reportType:'pie'}" :chart-card-name="titleList.analyzeName" :linkage="linkage" :change-chart="changeChart" @sendData="getData" @onChangeTeb="onChangeTeb" />
      <ChartCard v-if="warehouseBtn === 'qty'" :chart-data="storageTimeData" :opt="{reportType:'histogram'}" :chart-card-name="titleList.analyzeName" :linkage="linkage" :change-chart="changeChart" @sendData="getData" @onChangeTeb="onChangeTeb" />
      <TableCard :url="storageTimeRankingUrl" :stripe="true" :size="size" :section="section" :table-card-name="titleList.yearName" />
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import DataCard from '../components/DataCard'
import ChartCard from '../components/ChartCard'
import TableCard from '../components/TableCard'
import url from '@/api/url'

export default {
  components: {
    DataCard,
    ChartCard,
    TableCard,
  },
  data() {
    return {
      closeThirty: true, // 30天排行
      linkage: true,
      changeChart: true,
      goodsStockRankingUrl: url.goodsStockRanking, // 获取商品库存排行数据
      reportLossRankingUrl: url.reportLossRanking, // 商品报损排行
      storageTimeRankingUrl: url.storageTimeRanking, // 商品库龄排行
      section: {
        max: 30,
        min: 1,
      },
      warehouseBtn: 'amount', // 切换图表
    }
  },
  computed: {
    ...mapState('operation', [
      'storageTimeData', // 库龄数据
      'storageTimePieData', // 库龄pie数据
      'size',
      'buyList',
      'lossAndSaleList', // 获取指标卡商品报损数量和库销比(指标卡)
    ]),
    tocardList(state) { // 进货顶端数据
      const {buyList, lossAndSaleList} = state
      return [
        {text: this.$t('manage.totalMoney'), amount: buyList.totalMoney },
        {text: this.$t('manage.totalQty'), amount: buyList.totalQty, number: true },
        {text: this.$t('manage.lossMoney'), amount: lossAndSaleList.lossMoney},
        {text: this.$t('manage.stockSaleRate'), amount: lossAndSaleList.stockSaleRate, unit: true},
      ]
    },
    titleList() {
      return {
        inventoryName: this.$t('manage.inventoryName'),
        analyzeName: this.$t('manage.analyzeName'),
        breakageName: this.$t('manage.breakageName'),
        yearName: this.$t('manage.yearName'),
      }
    }
  },
  mounted() {
    this.$store.dispatch('operation/getIndexGoodNumberAndMoney') // 获取指标卡商品数量和库存金额
    this.$store.dispatch('operation/getIndexGoodsLossAndSaleRate') // 获取指标卡商品报损数量和库销比(指标卡)
    this.$store.dispatch('operation/getStorageTime') // 库龄分析
    this.$store.dispatch('operation/getStorageTimePie') // 库龄分析饼图
  },
  methods: {
    getData(e) {
      const newValue = e.split(/[\-\+]/)
      const newName = ['min', 'max']
      const section =
        newName &&
        newName.reduce((newData, value, index) => {
          const newKey = newName[index]
          newData[newKey] = newValue[index] === '' ? '999999999' : newValue[index] === '180' && value === 'min' ? '181' : newValue[index]
          return newData
        }, {})
      
      const newSection = {...section, filed: 'qty'}
      this.section = newSection
    },
    onChangeTeb(e) {
      this.warehouseBtn = e
    }
  }
}
</script>

<style scoped lang="scss">
    @import '../components/style'
</style>
